<template>
  <div class="wb_menu">
    <div class="menu_main">
      <wb-mobile ref="mobile" @selectMenu="handleSelectMenu"></wb-mobile>
      <div class="editBox">
        <div class="hd">
          <span>{{selectedMenu.name}}</span>
          <a class="delete" @click="handleDelMenu">删除菜单</a>
        </div>
        <div class="field-wrap">
          <div class="field-tit">菜单名称：</div>
          <div class="field-bd"><el-input type="text" v-model="selectedMenu.name"></el-input></div>
        </div>
        <div v-if="!selectedMenu.sub_button || selectedMenu.sub_button.length==0" class="urlWrap">
          <p>订阅者点击该子菜单会跳到以下链接</p>
          <el-input type="textarea" v-model="selectedMenu.url"></el-input>
        </div>
      </div>
    </div>
    <div class="menu_ft"><el-button type="primary" @click="handleSave" :loading="isSave">保存</el-button></div>
  </div>
</template>
<script>
  import {mapActions} from 'vuex'
  import wbMobile from '@/components/common/content/wbMobile'
  export default {
    components: {wbMobile},
    data () {
      return {
        selectedMenu: {
          name: '',
          type: '',
          url: '',
          sub_button: []
        },
        isSave: false
      }
    },
    watch: {
      selectedMenu: {
        deep: true,
        handler: function (val) {
          const $mobile = this.$refs.mobile
          Object.assign(this.selected, val)
          $mobile.menus = $mobile.menus
        }
      }
    },
    computed: {
      selected () {
        const $mobile = this.$refs.mobile
        if ($mobile.showSubMenu !== null) {
          return $mobile.menus[$mobile.showMenu].sub_button[$mobile.showSubMenu]
        } else if ($mobile.showSubMenu === null) {
          return $mobile.menus[$mobile.showMenu]
        }
      }
    },
    methods: {
      ...mapActions('weiboManage', ['setWbMenus']),
      // 删除菜单
      handleDelMenu () {
        const $mobile = this.$refs.mobile
        if ($mobile.showSubMenu !== null) {
          $mobile.menus[$mobile.showMenu].sub_button.splice($mobile.showSubMenu, 1)
        } else {
          $mobile.menus.splice($mobile.showMenu, 1)
        }
        $mobile.showSubMenu = null
        this.selected.url = ''
        this.selected.type = 'view'
        this.selectedMenu = this.selected
        // $mobile.menus = $mobile.menus
      },
      // 选中菜单
      handleSelectMenu () {
        this.selectedMenu = this.selected
      },
      // 保存
      async handleSave () {
        if (!this.submitCheck()) {
          return false
        }
        this.isSave = true
        const res = await this.setWbMenus({
          appid: this.$route.params.appid,
          button: this.$refs.mobile.menus
        })
        this.isSave = false
        res.data.code === 1 && this.$message.success('保存成功')
      },
      // 数据校验
      submitCheck () {
        const menus = this.$refs.mobile.menus
        console.log(menus)
        for (let i in menus) {
          const item = menus[i]
          if (!item.name) {
            this.$message.warning('请设置菜单名称')
            return false
          }
          if ((!item.sub_button.length || !item.sub_button) && !item.url) {
            this.$message.warning('请设置跳转链接')
            return false
          }
          for (let j in item.sub_button) {
            const subItem = item.sub_button[j]
            if (!subItem.name) {
              this.$message.warning('请设置子菜单名称')
              return false
            }
            if (!subItem.url) {
              this.$message.warning('请设置子菜单跳转链接')
              return false
            }
          }
        }
        return true
      }
    }
  }
</script>
<style lang="scss">
  .wb_menu{
    .menu_main{overflow:hidden;}
    .wb_mobile{float:left;}
    .editBox{
      &{margin-left:350px;padding: 0 20px 20px 20px;width:560px;height:560px;background:#f4f5f9;border:1px solid #e7e7eb;overflow:hidden;text-align:left;}
      .hd{margin-bottom:10px;padding:10px 0;line-height:20px;font-size:14px;border-bottom: 1px solid #e7e7eb;overflow:hidden;}
      .delete{float:right;cursor:pointer;}
      .urlWrap{margin-top:20px;font-size:14px;}
      .urlWrap p{margin-bottom:10px;}
    }
    .menu_ft{margin-top:20px;padding-left:130px;}
  }
</style>
